<template>
    <div class="all">
      <div :style="{marginBottom: bottomModularHeight + 'px'}">
        <p class="title">设备选择</p>
        <div class="modle">
          <div class="minModle" v-for="(index, key) in equipment" :class="{userSelect : minModle[key]}" @click="minModleClick(key)">{{index.name}}</div>
        </div>
        <p class="title">人数选择</p>
        <div class="modle">
          <div class="minModle" v-for="(index, key) in equipment" :class="{userSelect : minModle[key]}" @click="minModleClick(key)">{{index.name}}</div>
        </div>
        <p class="title">会议室类型</p>
        <div class="modle">
          <div class="minModle" v-for="(index, key) in equipment" :class="{userSelect : minModle[key]}" @click="minModleClick(key)">{{index.name}}</div>
        </div>
        <p class="title">会议时间</p>
        <mt-cell title="会议开始时间" @click.native="open('picker1')" :value="mettingStartTime"></mt-cell>
        <mt-cell title="会议结束时间" @click.native="open('picker2')" :value="mettingendTime"></mt-cell>
        <mt-datetime-picker ref="picker1" type="datetime" v-model="mettingStart" @confirm="handleChange(true)"
                            year-format="{value}"
                            month-format="{value} 月"
                            date-format="{value} 日"
                            hour-format="{value} 时"
                            minute-format="{value} 分"
        ></mt-datetime-picker>
        <mt-datetime-picker ref="picker2" type="datetime" v-model="mettingend" @confirm="handleChange(false)"
                            year-format="{value}"
                            month-format="{value} 月"
                            date-format="{value} 日"
                            hour-format="{value} 时"
                            minute-format="{value} 分"
        ></mt-datetime-picker>
      </div>
      <router-link tag="div" class="bottomModular" ref="bottomModular" to="MakeMeeting">
        确认预约会议室
      </router-link>
    </div>
</template>
<style lang="less" scoped>
  .modle{
    background: #fff;
    padding: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .minModle{
    display: inline-block;
    width: 4rem;
    padding: 0.3rem;
    box-shadow: 0 -1px 1px -1px rgba(0, 0, 0, .8),
    -1px 0 1px -1px rgba(0, 0, 0, .8),
    1px 0 1px -1px rgba(0, 0, 0, .8),
    0 1px 1px -1px rgba(0, 0, 0, .8);
    font-size: 0.8rem;
    text-align: center;
    margin: 0.5rem;
  }
  .userSelect{
    background: #6DB1FF;
    color: #fff;
  }
  .title{
    font-size: 0.5rem;
    color: #ccc;
    line-height: 2;
    padding: 0.5rem;
  }
  .mint-cell{
    margin-bottom: 1rem;
  }
  .bottomModular{
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 1rem;
    width: 100%;
    background: #6DB1FF;
    text-align: center;
    color: #fff;
    padding: 0.8rem 0;
  }
</style>
<script>
  export default{
    data(){
      return {
        equipment: [
          {name: '投影仪', id: 1},
          {name: '投影仪', id: 2},
          {name: '投影仪', id: 3},
          {name: '投影仪', id: 4},
          {name: '投影仪', id: 4},
          {name: '投影仪', id: 4},
          {name: '投影仪', id: 4}
        ],
        minModle: [],
        mettingStart: '',
        mettingStartTime: '',
        mettingend: '',
        mettingendTime: '',
        bottomModularHeight: ''
      }
    },
    created () {
      console.log(this)
    },
    methods: {
      minModleClick (key) {
        if (this.minModle[key]) {
          this.$set(this.minModle, key, false)
        } else {
          this.$set(this.minModle, key, true)
        }
      },
      open (val) {
        this.$refs[val].open()
      },
      handleChange (val) {
        console.log('handleChange', val)
      }
    },
    mounted () {
      this.bottomModularHeight = this.$refs.bottomModular.clientHeight + 8
    },
    components: {
      //'other-component':OtherComponent,
      //HeaderComponent,
    }
  }
</script>
